{include file="public/head"/}
<style type="text/css">
    .layui-table td, .layui-table th {
        position: relative;
        padding: 13px 10px;
        min-height: 19px;
        line-height: 19px;
        font-size: 14px;
    }

    .layadmin-backlog-body p cite {
        font-style: normal;
        color: #009688;
        font-size: 16px;
        font-weight: bold;
    }
</style>
<div class="layui-content-wrapper">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space8">
            <!--搜索开始-->
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">搜索</div>
                    <div class="layui-card-body">
                        <div class="table-head-btn" style="margin-bottom: 10px;">
                            <div class="layui-form">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width:auto;">关&nbsp; 键&nbsp; 词</label>
                                    <div class="layui-input-inline">
                                        <input class="layui-input" name="key" id="key" placeholder="用户名，电话"
                                               autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width:auto;">状态</label>
                                    <div class="layui-input-inline">
                                        <select name="status" id="status" lay-filter="status" lay-verify="required">
                                            <option value="0">全部</option>
                                            <option value="1">申请中</option>
                                            <option value="2">已通过</option>
                                            <option value="3">已驳回</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width:auto;">创建开始时间</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="开始时间" class="layui-input" name="start_time"
                                               id="start_time" AUTOCOMPLETE="off" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width:auto;">创建结束时间</label>
                                    <div class="layui-input-inline">
                                        <input placeholder="结束时间" class="layui-input" name="end_time" id="end_time"
                                               AUTOCOMPLETE="off" autocomplete="off"/>
                                    </div>
                                </div>
                                <button class="layui-btn" data-type="reload">搜索</button>
                                <button class="layui-btn" id="addExcel_w">导出</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--搜索结束-->

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">数据列表</div>
                    <div class="layui-card-body">
                        <table class="layui-hide" id="list" lay-filter="list"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/foot"/}

<script type="text/html" id="state">
    {{# if(d.status==1){ }}
    <span style="color: #FF5722">申请中</span>
    {{# }else if(d.status==2){ }}
    <span style="color: #009688">已通过</span>
    {{# }else if(d.status==3){ }}
    <span style="color: #FFB800">已驳回</span>
    {{# } }}
</script>
<script type="text/html" id="actual_amount">
    <span style="color: #FF5722">{{d.amount*0.8}}</span>
</script>

<script type="text/html" id="type">
    {{# if(d.type==1){ }}
    <span style="color: #2F4056">支付宝</span>
    {{# }else if(d.type==2){ }}
    <span style="color: #1E9FFF ">银行</span>
    {{# } }}
</script>
<script type="text/html" id="action">
    {{# if(d.status==1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="confirm">
        <i class="layui-icon layui-icon-ok"></i>通过
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="cancel"><i
                class="layui-icon layui-icon-close"></i>驳回</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
    {{# }else{ }}
    -
    {{# } }}
</script>

<script>
    layui.config({
        base: '__LAYDMIN__',
        shade: 0
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'carousel', 'form'], function () {
        var $ = layui.$;
        var admin = layui.admin;
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var util = layui.util;
        var upload = layui.upload;
        var carousel = layui.carousel;
        var device = layui.device();
        var tableLoadDiv = window.top.layer.load(0,{shade:[0.15, '#000']}); //加载层,table.render完成时需要关闭
        //全部数据
        tableIn = table.render({
            elem: '#list',
            url: '{:url(SYS_PATH."/".CONTROLLER."/index")}',
            method: 'post',
            autoSort: false,
            loading: true,
            cols: [[
                {type: 'checkbox'},
                {field: 'id', title: 'ID', width: 60,align:'center'},
                {field: 'username', title: '提现用户', width: 120,align:'center'},
                {field: 'mobile', title: '用户电话', width: 120,align:'center'},
                {field: 'amount', title: '提现金额', width: 100,align:'center'},
                {field: 'service_price', title: '手续费', width: 100,align:'center'},
                {field: 'type', align: 'center', title: '账户类型', width: 100, toolbar: '#type'},
                {field: 'bank_name', title: '银行名称', width: 120,align:'center'},
                {field: 'account_name', title: '账户名称', width: 120,align:'center'},
                {field: 'account', title: '账号号码', width: 120,align:'center'},
                {field: 'actual_amount', title: '实际转账', width: 100,toolbar: '#actual_amount',align:'center'},
                {field: 'status', align: 'center', title: '状态', width: 120, toolbar: '#state',sort:true},
                {field: 'create_time', title: '发起时间', width: 160,sort:true,align:'center'},
                {width: 220,title:'操作', align: 'center', toolbar: '#action'}
            ]],
            page: true,
            done: function (res) {
                window.top.layer.close(tableLoadDiv);
            }
        });

        table.on('sort(list)', function (obj) {
            table.reload('list', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    sort_by: obj.field //排序字段
                    , sort_order: obj.type //排序方式
                }
            });
        });


        let index1 = '';
        const option = {
            type: 1, // 页面层，可自定义内容
            title: '请输入驳回原因',
            btn: ['确认', '取消'],
            content: '<div id="popup" style="display: flex;flex-direction: column;padding: 18px;">' +
                '<textarea id="textarea" style="width: 100%;height: 100px;padding: 8px;border: 1px solid #ccc;' +
                'box-sizing: border-box;outline: none;font-size: 16px;" placeholder="请输入驳回原因"></textarea></div>', // 内容
            area: ['400px', '240px'], // 模态框尺寸
            btnAlign: 'r', // 按钮对齐方式 l 左对齐 c 中间对齐 r 右对齐
            yes: function () {
                let info = $('#textarea').val(); // 文本框值
                if (info == ''){
                    layer.msg('请输入驳回原因');return;
                }
                var uri = "{:url(SYS_PATH.'/'.CONTROLLER.'/cancelReturn')}?id=" + id + "&remarks=" + info;
                layui.doSomething(uri, "确认要驳回吗", id, tableIn);
                layer.close(index1);
            }
        }

        //列表编缉与删除---监听工具条
        var id = '';
        table.on('tool(list)', function (obj) {
            var data = obj.data;
            id = data.id;
            if (obj.event === 'del') {
                var uri = "{:url(SYS_PATH.'/'.CONTROLLER.'/doDelete')}"
                layui.doDelete(uri, "确定要删除该提现请求吗？", id, obj);//单个删除接口
            } else if (obj.event === 'confirm') {
                var uri = "{:url(SYS_PATH.'/'.CONTROLLER.'/confirm')}"
                layui.doSomething(uri, "确认要通过提现吗", id, tableIn);
            } else if (obj.event === 'cancel') {
                index1 = layer.open(option)
            }
        });


        //改变状态
        form.on('switch(status)', function (obj) {
            var id = this.value;
            var status = obj.elem.checked === true ? 1 : 2;
            admin.req({
                url: '{:url(SYS_PATH.'/'.CONTROLLER.'/doStatus')}'
                , type: 'post'
                , data: {'id': id, 'status': status}
                , success: function (res) {
                    if (res.code == 0) {
                        window.top.layer.msg(res.msg, {time: 1000, icon: 1,shade:[0.5,'#000']});
                    } else {
                        window.top.layer.msg(res.msg, {time: 1000, icon: 2,shade:[0.5,'#000']});
                        if (obj.elem.checked == true) {
                            $(obj.elem).prop('checked', false);
                        } else {
                            $(obj.elem).prop('checked', true);
                        }
                        form.render();
                    }
                }
            });
        });

        //监听头部按钮
        $('.clt-auth-btns .layui-btn').on('click', function () {
            var type = $(this).data('type');
            var title = $(this).data('title');
            if (type === 'add') {
                layui.layerOpen("{:url(SYS_PATH.'/'.CONTROLLER.'/add')}", title);
            } else if (type == 'deleteAll') {
                layui.deleteAll("{:url(SYS_PATH.'/'.CONTROLLER.'/doDeleteAll')}", "确定要批量删除吗？", tableIn);//tableIn为渲染列表对象
            }
        });

        // 导出Excel
        $('#addExcel_w').click(function () {
            var start_time = $('#start_time').val();
            var end_time = $('#end_time').val();
            var status = $('#status').val();
            var key = $('#key').val();
            var url = "{:url(SYS_PATH."/Cash/exportExcel")}";
            url = url+'?key='+key+'&start_time='+start_time+'&end_time='+end_time+'&status='+status;
            window.open(url);
        });


        //搜索重载
        $('.table-head-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            if (type === 'reload') {
                var key = $('#key').val();
                //执行重载
                table.reload('list', {
                    page: {curr: 1 },
                    where: {
                        key: key
                    }
                });
            }
        });

        //分类选择
        form.on('select(cid)', function (data) {
            var cid = data.value;
            //执行重载
            table.reload('list', {
                page: {curr: 1 },
                where: {
                    cid: cid
                }
            });
        });

        form.on('select(status)', function (data) {
            var status = data.value;
            //执行重载
            table.reload('list', {
                page: {curr: 1 },
                where: {
                    status: status
                }
            });
        });

        //轮播切换
        $('.layadmin-carousel').each(function () {
            var othis = $(this);
            carousel.render({
                elem: this
                , width: '100%'
                , arrow: 'none'
                , interval: othis.data('interval')
                , autoplay: othis.data('autoplay') === true
                , trigger: (device.ios || device.android) ? 'click' : 'hover'
                , anim: othis.data('anim')
            });
        });

        $('.table-head-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            if (type === 'reload') {
                var key = $('#key').val();
                var status = $('#status').val();
                var start_time = $('#start_time').val();
                var end_time = $('#end_time').val();
                if (start_time) {
                    if (!end_time) {
                        layer.msg('请选择结束时间！');
                        return;
                    }
                }
                if (end_time) {
                    if (!start_time) {
                        layer.msg('请选择开始时间！');
                        return;
                    }
                }
                //执行重载
                table.reload('list', {
                    page: {curr: 1 },
                    where: {
                        key: key,
                        status: status,
                        end_time: end_time,
                        start_time: start_time
                    }
                });
            }
        });

    })
    ;
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start_time'
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm:ss'//指定元素
        });
        laydate.render({
            elem: '#end_time'
            , type: 'datetime'
            , format: 'yyyy-MM-dd HH:mm:ss'//指定元素
        });
    });
</script>
</body>
</html>

